<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">选择服务</view>
				<view class="uni-list-cell-db">
					<picker v-if="config_list.length > 0 " @change="bindPickerChange" :value="index" :range="config_list" range-key="jenkins_name">
						<view class="uni-input">{{ config_list[index].jenkins_name}}</view>
					</picker>
				</view>

			</view>
		</view>
		<view class="uni-title">
			<view class="line"></view>
			Job List
		</view>
		<view class="uni-list">
			<template v-for="(item, key) in job_list">
				<view class="uni-list-cell">
					<navigator style="display: block; width: 100%; height: 100%; line-height: 100rpx; padding-left: 50rpx;" hover-class="navigator-hover" open-type="navigate"
					 :url="'/pages/job/job?jenkins_config_id='+select_config.jenkins_config_id+'&job_name=' + item.name">{{ key+1}}.
						{{item.name}}</navigator>
				</view>

			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: null,
				index: 0,
				config_list: [],
				select_config: null,
				job_list: []
			}
		},
		onShow() {
			if (this.token == null) {
				var _this = this
				var token_obj = this.common.checkNeedLogin()
				if (token_obj != null) {
					this.token = token_obj.token
					this.queryConfigList()
				}

			}
		},
		onLoad() {},
		methods: {
			bindPickerChange(e) {
				var _this = this
				this.select_config = this.config_list[e.detail.value]
				this.common.requestAPI(this.common.config.API_GET_JOB_LIST, 'GET', {
					token: this.token,
					jenkins_config_id: this.select_config.jenkins_config_id
				}, '正在获取Job List', function(res) {
					_this.job_list = res.result.jobs
				})
			},
			queryConfigList() {
				var _this = this
				this.common.requestAPI(this.common.config.API_GET_CONFIG_LIST, 'GET', {
					token: this.token
				}, '正在获取配置', function(res) {
					if (res.status == 'OK') {
						_this.config_list = res.result
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.line {
		display: inline-block;
		margin: 0 10rpx;
		height: 15px;
		background-color: silver;
		border-radius: 5px;
		width: 3px;
	}

	.uni-section__head {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin-right: 10px;
	}
</style>
